Toronto Cupcake Redesign

Website Redesign Journey with

Toronto Cupcake

Introduction

This redesign project originated from a critical evaluation of the website's user experience (UX) and interface design. The website was suffering from an outdated design and did not meet modern user expectations. From a UX standpoint, it had a few navigation challenges, cumbersome interactions and a cluttered layout with elements that have no style, hierarchy or typography, making it difficult for users to find what they were looking for.

Our purpose was to improve the “Cupcake ordering” journey for the Toronto Cupcakes website, focusing on the mentioned UI aspects along with the UX aspects such as creating a simple yet robust IA and a user flow that’s intuitive for the user to execute.

Goals

We aimed to significantly improve the user experience for Toronto Cupcakes, leading to increased conversions, higher sales, and a stronger brand presence.

Design Process

Card Sort

We conducted a card sorting exercise with users to understand how they organize and categorize content.

Information Architecture

Based on the results of the card sort, an information architecture was developed to ensure content was organized in a way that was intuitive and easy to navigate.

User Flow

We designed a user flow based on the task any user would do on the website, therefore we selected the purchase path.

Mobile Screen Sketches to Low-Fidelity Prototype

Features:

1. Filter: Enables easy discovery based on customer preferences.
2. Calories and Nutrition Information: Aids health-conscious choices.
3. Ratings: Shows what other customers think, helps confident decision-making.
4. Customization: Helps customers make their cupcakes special and boosts appeal.
5. Scan Card: Expedites checkout and simplifies online shopping.

Color and Typography

After numerous iterations, we came up with these choices to preserve the brand’s essence while thinking about the delicate allure and sweet appeal of cupcakes bring while enjoying them.

Usability Tests

Hi-Fidelity Prototype (Mobile Web Version)

High-fidelity prototypes were developed based on feedback from low-fidelity usability testing, to refine the design and to ensure it met user needs and expectations.